<%@page import="com.mall.app.utils.enumeration.LoginType"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
<%@page import="com.mall.app.utils.MyAccount"%>
<%@page import="org.apache.shiro.SecurityUtils"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>家居商城-详情</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../layui/css/layui.css">
<link rel="stylesheet" href="../static/css/index.css">
</head>
<body>
	<%
			MyAccount account = (MyAccount)SecurityUtils.getSubject().getSession().getAttribute("account");
			if(account==null) {
				response.sendRedirect("login.jsp");
				return;
			}
			%>
	<script src="../layui/layui.js"></script>
	<script src="../static/js/utils.js"></script>
	<%
	String gidString = request.getParameter("gid");

%>
	<script type="text/javascript">
layui.use(['jquery','laytpl','form','layer'],function(){
	var laytpl = layui.laytpl;
	var $ = layui.jquery;
	var form=layui.form;
	var layer=layui.layer;
	
	$.ajax({
		url : '../goods/getById',
		type : "post",
		dataType : "json",
		data: {
			gid:<%=gidString%>
		},
		success : function(data) {
			//渲染模板
			renderTpl($,laytpl,data,'#detailtpl','view');
			
			form.on('submit(purchase)', function(data){
				  //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
				  //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
				  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
				  //alert('aaa');
				  <%
				  	if(account.getLoginType()==LoginType.USER){
				  		%>
				  		layer.msg('管理员无法进行此操作');
				  		
				  		<%
				  		
				  	}else{
				  		%>
				  		$.post('../order/purchaseGoods',data.field,function(flag){
							  
							  if(flag){
								  layer.msg('订单提交成功，请在订单页面付款');
							  }else{
								  layer.msg('订单提交失败',{icon:5});
							  }
						  })
				  		
				  		<%
				  	}
				  %>
				  
				  
				  
				  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
			
			form.on('submit(addToCart)', function(data){
				  //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
				  //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
				  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
				  //alert('aaa');
				  <%
				  	if(account.getLoginType()==LoginType.USER){
				  		%>
				  		layer.msg('管理员无法进行此操作');
				  		
				  		<%
				  	}else{
				  		%>
				  		$.post('../cart/insert',data.field,function(flag){
							  if(flag){
								  layer.msg('加入购物车成功');
							  }else{
								  layer.msg('加入购物车失败',{icon:5});
							  }
						  })
				  		
				  		<%
				  	}
				  %>
				  
				  
				  
				  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});
			
			
		}
		
		
	})
	//渲染购物车数字
		getData($,'../cart/list?buyerId='+<%=account.getId()%>,function(data){
			console.log(data.length);
			var cartCount = document.getElementById('cart-count');
			cartCount.innerHTML=data.length;
		})
})
</script>

	<div class="house-header">
		<div class="layui-container">
			<div class="house-nav">
				<span class="layui-breadcrumb" lay-separator="|"> 
				<shiro:authenticated>
					<a href="#">欢迎您，[<shiro:principal/>] </a>
					 <a href="../logout">注销</a>
				</shiro:authenticated>
				<shiro:notAuthenticated>
				    <a href="login.jsp">登录 </a> 
				</shiro:notAuthenticated>
				<a href="myOrder.jsp">我的订单</a>
				</span> <span class="layui-breadcrumb house-breadcrumb-icon"
					lay-separator=" "> <a id="search"><i
						class="layui-icon layui-icon-house-find"></i></a> <a href="login.html"><i
						class="layui-icon layui-icon-username"></i></a> <a
					href="cartList.jsp"><i
						class="layui-icon layui-icon-house-shop"></i></a>
				</span>
			</div>
			<div class="house-banner layui-form" style="height: 100px">
				<a class="banner" href="../index.jsp"> <img
					src="../static/img/banner.png" alt="家居商城">
				</a>
				<div class="layui-input-inline">
					<input type="text" placeholder="搜索好物" class="layui-input"><i
						class="layui-icon layui-icon-house-find"></i>
				</div>
				<!-- 购物车图标 -->
				<a class="shop" href="cartList.jsp"><i
					class="layui-icon layui-icon-house-shop"></i><span
					class="layui-badge" id="cart-count">1</span></a>
			</div>
			<ul class="layui-nav close">
				<li class="layui-nav-item layui-this"><a href="../index.jsp">首页</a></li>
				<li class="layui-nav-item"><a href="list.jsp">居家用品</a></li>
				<li class="layui-nav-item"><a href="list.jsp">小家电</a></li>
				<li class="layui-nav-item"><a href="list.jsp">洗护</a></li>
				<li class="layui-nav-item"><a href="list.jsp">厨具</a></li>
				<li class="layui-nav-item"><a href="list.jsp">日用品</a></li>
			</ul>
			<button id="switch">
				<span></span><span class="second"></span><span class="third"></span>
			</button>
		</div>
	</div>

	<div class="layui-container house-detail">
		<p class="title">
			<a href="../index.jsp">首页</a> &gt; <a href="list.jsp">家居用品</a> &gt; <span>产品详情</span>
		</p>
		<div id="view"></div>
		<script id="detailtpl" type="text/html">
		<div class="layui-row price">
		<div class="layui-col-sm6">
			<div class="intro-img">
				<img src="../res/goods/images/{{d.images}}">
			</div>
		</div>
		<div class="layui-col-sm6 shopChoose">
			<div class="title">
				<p>
					<span class="layui-badge">新品</span>{{d.gname}}
				</p>
			</div>
			<p>
				<span>￥<big><b>{{d.price}}</b></big></span>原价￥<big><del>399</del></big>
							
			</p>
			<p>
				{{d.gdesc}}
			</p>
			<div class="layui-form">
			
			<div class="number">
				<label>数量</label>
				<div class="layui-input-inline btn-input">
					<button id="sup" class="layui-btn layui-btn-primary sup">-</button>
					<input name="goodsQuantity" type="text" class="layui-input" value="1">
					<button id="sub" class="layui-btn layui-btn-primary sub">+</button>
				</div>
				还剩{{d.quantity}}件
			<input type="hidden" name="gid" value="<%=gidString%>"/>
			<!--获取当前登录用户的bid，之后用shiro设置管理员无法进入此页面进行购买-->
			
			<input type="hidden" name="bid" value="<%=account.getId()%>"/>
				<p class="inputTips">已超出库存数量！</p>
			</div>
			<div class="shopBtn">
				<button lay-submit lay-filter="purchase" class="layui-btn layui-btn-primary sale">立即购买</button>
				<button lay-submit lay-filter="addToCart" class="layui-btn shop">
					<i class="layui-icon layui-icon-house-shop"></i>加入购物车
				</button>
				
			</div>
			</div>
		</div>
	</div>
		
		</script>
		<div class="layui-row layui-col-space30">
			<div class="layui-col-sm8 detailTab">
				<div class="layui-tab layui-tab-brief">
					<ul class="layui-tab-title">
						<li class="layui-this">详情</li>
						<li>评论 <span>(120)</span></li>
					</ul>
					<div class="layui-tab-content">
						<div class="layui-tab-item layui-show">
							<img src="../static/img/goods_img3.jpg"> <img
								src="../static/img/goods_img4.jpg"> <img
								src="../static/img/goods_img5.jpg">
						</div>
						<div class="layui-tab-item">
							<div class="comment">
								<ul>
									<li>
										<div class="img">
											<img src="../static/img/person.png">
										</div>
										<p class="txt">质量还可以！纯棉的，盖着挺舒服的，对皮肤也好。</p>
										<p class="time">2018年05月02日 11:20</p>
									</li>
									<li>
										<div class="img">
											<img src="../static/img/person.png">
										</div>
										<p class="txt">质量还可以！纯棉的，盖着挺舒服的，对皮肤也好。</p>
										<p class="time">2018年05月02日 11:20</p>
									</li>
									<li>
										<div class="img">
											<img src="../static/img/person.png">
										</div>
										<p class="txt">质量还可以！纯棉的，盖着挺舒服的，对皮肤也好。</p>
										<p class="time">2018年05月02日 11:20</p>
									</li>
									<li>
										<div class="img">
											<img src="../static/img/person.png">
										</div>
										<p class="txt">质量还可以！纯棉的，盖着挺舒服的，对皮肤也好。</p>
										<p class="time">2018年05月02日 11:20</p>
									</li>
									<li>
										<div class="img">
											<img src="../static/img/person.png">
										</div>
										<p class="txt">质量还可以！纯棉的，盖着挺舒服的，对皮肤也好。</p>
										<p class="time">2018年05月02日 11:20</p>
									</li>
									<li>
										<div class="img">
											<img src="../static/img/person.png">
										</div>
										<p class="txt">质量还可以！纯棉的，盖着挺舒服的，对皮肤也好。</p>
										<p class="time">2018年05月02日 11:20</p>
									</li>
									<li>
										<div class="img">
											<img src="../static/img/person.png">
										</div>
										<p class="txt">质量还可以！纯棉的，盖着挺舒服的，对皮肤也好。</p>
										<p class="time">2018年05月02日 11:20</p>
									</li>
									<li>
										<div class="img">
											<img src="../static/img/person.png">
										</div>
										<p class="txt">质量还可以！纯棉的，盖着挺舒服的，对皮肤也好。</p>
										<p class="time">2018年05月02日 11:20</p>
									</li>
									<li>
										<div class="img">
											<img src="../static/img/person.png">
										</div>
										<p class="txt">质量还可以！纯棉的，盖着挺舒服的，对皮肤也好。</p>
										<p class="time">2018年05月02日 11:20</p>
									</li>
									<li>
										<div class="img">
											<img src="../static/img/person.png">
										</div>
										<p class="txt">质量还可以！纯棉的，盖着挺舒服的，对皮肤也好。</p>
										<p class="time">2018年05月02日 11:20</p>
									</li>
									<li>
										<div class="img">
											<img src="../static/img/person.png">
										</div>
										<p class="txt">质量还可以！纯棉的，盖着挺舒服的，对皮肤也好。</p>
										<p class="time">2018年05月02日 11:20</p>
									</li>
									<li>
										<div class="img">
											<img src="../static/img/person.png">
										</div>
										<p class="txt">质量还可以！纯棉的，盖着挺舒服的，对皮肤也好。</p>
										<p class="time">2018年05月02日 11:20</p>
									</li>
									<li>
										<div class="img">
											<img src="../static/img/person.png">
										</div>
										<p class="txt">质量还可以！纯棉的，盖着挺舒服的，对皮肤也好。</p>
										<p class="time">2018年05月02日 11:20</p>
									</li>
									<li>
										<div class="img">
											<img src="../static/img/person.png">
										</div>
										<p class="txt">质量还可以！纯棉的，盖着挺舒服的，对皮肤也好。</p>
										<p class="time">2018年05月02日 11:20</p>
									</li>
									<li>
										<div class="img">
											<img src="../static/img/person.png">
										</div>
										<p class="txt">质量还可以！纯棉的，盖着挺舒服的，对皮肤也好。</p>
										<p class="time">2018年05月02日 11:20</p>
									</li>
									<li>
										<div class="img">
											<img src="../static/img/person.png">
										</div>
										<p class="txt">质量还可以！纯棉的，盖着挺舒服的，对皮肤也好。</p>
										<p class="time">2018年05月02日 11:20</p>
									</li>
									<li>
										<div class="img">
											<img src="../static/img/person.png">
										</div>
										<p class="txt">质量还可以！纯棉的，盖着挺舒服的，对皮肤也好。</p>
										<p class="time">2018年05月02日 11:20</p>
									</li>
									<li>
										<div class="img">
											<img src="../static/img/person.png">
										</div>
										<p class="txt">质量还可以！纯棉的，盖着挺舒服的，对皮肤也好。</p>
										<p class="time">2018年05月02日 11:20</p>
									</li>
								</ul>
								<div id="detailList"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="layui-col-sm4 detailCom">
				<p class="title">热销推荐</p>
				<ul class="detailCom-content hot-sell">
					<li><a class="text">
							<div>
								<img src="../static/img/goods_img6.jpg">
							</div>
							<p>森系小清新四件套</p>
							<p class="price">￥200</p>
					</a></li>
					<li><a class="text">
							<div>
								<img src="../static/img/goods_img7.jpg">
							</div>
							<p>森系小清新四件套</p>
							<p class="price">￥200</p>
					</a></li>
					<li><a class="text">
							<div>
								<img src="../static/img/goods_img8.jpg">
							</div>
							<p>森系小清新四件套</p>
							<p class="price">￥200</p>
					</a></li>
					<li><a class="text">
							<div>
								<img src="../static/img/goods_img9.jpg">
							</div>
							<p>森系小清新四件套</p>
							<p class="price">￥200</p>
					</a></li>
					<li><a class="text">
							<div>
								<img src="../static/img/goods_img6.jpg">
							</div>
							<p>森系小清新四件套</p>
							<p class="price">￥200</p>
					</a></li>
				</ul>
			</div>
		</div>
	</div>

	<div class="house-footer">
		<div class="layui-container">
			<div class="intro">
				<span class="first"><i
					class="layui-icon layui-icon-house-shield"></i>7天无理由退换货</span> <span
					class="second"><i class="layui-icon layui-icon-house-car"></i>满99元全场包邮</span>
				<span class="third"><i
					class="layui-icon layui-icon-house-diamond"></i>100%品质保证</span> <span
					class="last"><i class="layui-icon layui-icon-house-tel"></i>客服400-2888-966</span>
			</div>
			<div class="about">
				<span class="layui-breadcrumb" lay-separator="|"> <a
					href="about.html">关于我们</a> <a href="about.html">帮助中心</a> <a
					href="about.html">售后服务</a> <a href="about.html">配送服务</a> <a
					href="about.html">关于货源</a>
				</span>
				<p>家居商城版权所有 &copy; 2012-2020</p>
			</div>
		</div>
	</div>


	<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
	<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
	<script>
		layui.config({
			base : '../static/js/'
		}).use('house');
	</script>

</body>
</html>